【post请求下载文件流】如何使用post请求下载文件流 blob |
您所在的位置：网站首页 › post it 下载 › 【post请求下载文件流】如何使用post请求下载文件流 blob |
|
最近有个需求，做文件的下载。其实下载没什么要特别说的，之前都是用的get请求，这次不同，后台用的post请求，返回的是数据流，这种post请求下载文件的方式倒是没怎么弄过。记录一下。 接口接口地址为： /file/download/${id} 前端请求这里要注意（这个是重点）设置 responseType: 'blob'。 我这里用 axios 请求，代码如下： import {axios} from '../../config'; import {BaseURL} from "@/serviceConfig"; // 附件下载 export const download = id => axios({ method: 'post', url: `${BaseURL}/file/download/${id}`, // 请求地址 responseType: 'blob' });然后这样请求回来的结果就是blob： // 附件点击下载 async downloadDoc (id) { let res = await download(id); let blob = res.data; let url = window.URL.createObjectURL(blob); let eleLink = document.createElement('a'); eleLink.href = url eleLink.download = name document.body.appendChild(eleLink) eleLink.click() window.URL.revokeObjectURL(url) }, 拓展这里出现了不怎么常用的方法：window.URL.createObjectURL(blob) 和 window.URL.revokeObjectURL(url)。 window.URL.createObjectURL(blob) mdn文档： https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL 每次你调用window.URL.createObjectURL()，就会产生一个唯一的对象URL。结果如下： blob：http://xxxxxx获得这个地址之后，去开起下载任务。 window.URL.revokeObjectURL(url) 当文档关闭时，它们会自动被释放。如果你的网页要动态使用它们，你需要显式调用 window.URL.revokeObjectURL()来释放它们。 就这样记录一下。
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |